<template>
	<view>
		<block>
			<uni-nav-bar @clickLeft="goBack" status-bar="true" shadow="true" left-icon="back" left-text="返回" title="Life Recorder"></uni-nav-bar>
			<uni-search-bar :radius="80" v-on:input="getInput" v-on:confirm="doSearch" v-on:searchclick="searchclick">
			</uni-search-bar>
		</block>
		<scroll-view scroll-y="true" class="list" @scrolltolower="loadmore()" :style="{height:srowviewhight+'px'}">

			<view v-if="showHistory">
				<uni-section title="搜索历史" type="line"></uni-section>
				<view class="example-body">
					<block v-for="(his,index) in historyItems" :key="index">
						<view class="tag-view" @tap="clickHistory(his)">
							<uni-tag :text="his" />
						</view>
					</block>
				</view>
			</view>
			<view v-else>
				<uni-list v-if="items.length>0">
					<block v-for="(item,index2) in items" :key="index2">
						<index-list :from="searchpage" :item="item" :index="index2"></index-list>
					</block>
					<view class="load-more">{{loadmoreText}}</view>
				</uni-list>
				<view v-else style="text-align: center;">
					<image src="../../static/tabar/xianrenzhangshu.png" mode="center"></image>
					<view style="width: 100%; color: #AAAAAA; font-size: larger;">
						你似乎来到了没有信息存在的荒原..
					</view>
					<view style="width: 100%; color: #AAAAAA; font-size: larger;">
						请检查网络连接状况..
					</view>
					<view style="width: 100%; color: #007AFF; font-size: large;" @tap="gobackClick">
						返回
					</view>
				</view>
			</view>


		</scroll-view>
		<view @tap="refresh" class="refresh-button icon iconfont icon-shuaxin" />
	</view>
</template>

<script>
	import indexList from "../../components/index/index-list.vue";
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import config from "@/common/config.js"
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	import uniTag from '@/components/uni-tag/uni-tag.vue';
	export default {
		components: {
			indexList,
			uniList,
			uniListItem,
			uniSearchBar,
			uniNavBar,
			uniSection,
			uniTag

		},

		data() {
			return {
				items: [],
				loadmoreText: '上拉加载更多',
				isLoadingMore: false,
				currentPage: 1,
				srowviewhight: 300,
				q: '',
				showHistory: true,
				historyItems: [],
				searchpage: '搜索页'
			}
		},
		onLoad() {

			uni.getSystemInfo({
				success: (res) => {
					//减去顶部tab，底部tabbar，顶部搜索,顶部搜索margin-top
					let windowHight = res.windowHeight - uni.upx2px(0) - uni.upx2px(0) - 32 - uni.upx2px(20);
					// this.swiperhight = windowHight;
					this.srowviewhight = windowHight - uni.upx2px(200);
				}
			});
			// console.log();
		},
		onShow() {
			// console.log('cvcvcvcvc');
			// console.log(this.q);
			// console.log(this.items.length);
			if (this.q) {
				// this.showHistory = false;
			}
		},
		onPullDownRefresh() {
			console.log('页面整体onPullDownRefresh');
			this.currentPage = 1;
			this.getAllTopics(1);
		},
		methods: {
			searchclick() {
				this.showHistory = true;
			},
			clickHistory(his) {
				this.q = his;
				this.items = [];
				this.getAllTopics(1);
				this.showHistory = false;
			},
			doSearch(e) {
				console.log(e.value);
				this.historyItems.unshift(e.value);
				this.q = e.value;
				this.items = [];
				this.getAllTopics(1);
				this.showHistory = false;


			},
			getInput(e) {
				this.q = e.value;
			},
			loadmore() {
				if (!this.isLoadingMore && this.loadmoreText != "没有更多数据") {
					this.isLoadingMore = true;
					this.loadmoreText = "数据加载中..";
					this.getAllTopics(this.currentPage);
				}


			},
			refresh() {
				uni.startPullDownRefresh({

				});

			},
			getAllTopics(page) {
				
				if (this.q.length == 0) {
					this.items = [];
					this.isLoadingMore = false;
					uni.stopPullDownRefresh();
					return;
				}
				uni.showLoading({
					title:"加载中.."
				});
				var url = config.baseUrl + '/topics?page=' + page + '&q=' + this.q;
				console.log(url);
				uni.request({
					method: 'GET',
					timeout: 8000,
					url: url,
					success: (res) => {
						var statusCode = res.statusCode;
						if (200 == statusCode) {
							if (page === 1) {
								this.items = res.data;
							} else {
								this.items = this.items.concat(res.data);
							}
							if (res.data.length > 0) {
								this.loadmoreText = "上拉加载更多";
								this.currentPage = this.currentPage + 1;
							} else {
								this.loadmoreText = "没有更多数据";
							}
						} else {
							console.log('else');
						}
					},
					fail: (res) => {
						console.log('fail');
					},
					complete: () => {
						this.isLoadingMore = false;
						uni.stopPullDownRefresh();
						uni.hideLoading();
					}
				});
			},
			goBack() {
				uni.navigateBack({

				})
			},
			gobackClick(){
				uni.navigateBack({
				
				})
			}
		}
	}
</script>

<style>
	.uni-searchbar {
		margin-top: 20upx;
	}

	.load-more {
		text-align: center;
		color: #AAAAAA;
		padding: 15upx;
	}

	.refresh-button {
		position: fixed;
		bottom: 200upx;
		right: 30upx;
		font-size: 60upx;
		/* font-weight: bold; */
		color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 20rpx;
	}

	.tag-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		margin: 10rpx 15rpx;
		justify-content: center;
	}
</style>
